var Block = Backbone.View.extend({
	initialize : function() {
		this.render();
		this.model.on('change:sub', this.updateSub, this);
	},
	events : {
		"click .panel-tab" : "toggle"
		// "click .panel-container": "click"
	},
	tabsMenus: {},
	authControls:[],
	render : function() {
		var html = _.template($("#block_template").html(), this.model.toJSON());
		this.menuTemp = $('#actionmenu_template').html();
		this.block = $(html);
		this.$el.append(this.block);
		this.block[0].block = this;
		// this.block = $('.panel-container:last', this.$el);
		this.body = $('.panel-body', this.block);
		this.headline = $('.panel-line', this.block);
		this.head = $('.panel-header', this.block);
		var blockName = this.model.get('title');
		this.block.click(this, this.click);

		//event data, function
		var t = this;
		this.block.on({//For other block
			hide_block : function() { 
				$('.panel-body', this).hide();
				$('.panel-line', this).hide();

				$('.panel-tab span.triangle', this).hide();
				$('.panel-tab ul.nav > li', this).not(".active").hide();
				$('.panel-tab ul.nav > li.active a span', this).hide();
				//t.hideSubTitle();
				if(t.model.has('sub'))t.model.set({sub:""})
			},
			show_block : function() {
				$('.panel-body', this).show();
				$('.panel-line', this).show();
				// $('.panel-subtitle', this);
				$('.panel-tab span.triangle', this).show();
				$('.panel-tab ul.nav > li', this).not(".active").show();
				$('.panel-tab ul.nav > li.active a span', this).show();
				if(t.model.has('sub'))t.model.set({sub:""})
			},
			user: function(){

			},
			restore: function(){
				t.restore();
			}
		});
		Auth.ctrl.push(this.block);	
		if(this.model.has('items')){
			
			this.tabs = new TabMenus({
				el: $('.panel-tab ul.nav', this.head),
				collection: this.model.get('items'),
				block: this
			});
		}
		$('.panel-tab ul.nav > li[entry=1]', this.block).click(function(){
				if($(this).hasClass("active"))
					return;
				$(this).trigger('restore')
			}
		)
	},
	updateSub : function() {
		//$('.panel-title', this.block).text(this.model.get('title'));
		// $('.panel-tab li[entry=1] a', this.head).text(this.model.get('entry'));
		if(this.model.get('sub').trim().length > 0){
			var sub = $('.panel-subtitle', this.head).text(this.model.get('sub'));
			var left = $('.panel-title', this.head).position().left + $('.panel-title', this.head).outerWidth();
			if (sub.is(':hidden'))
				sub.fadeIn('fast').animate({
					left : left
				},'fast')
			}
		else{
			this.hideSubTitle();
		}
	},
	
	hideSubTitle: function(){
		$('.panel-subtitle', this.head).animate({
			left : $('.panel-title', this.head).position().left
			// , width: $('.panel-title', this.head).width()
		}, 'fast').fadeOut('fast');		
	},
	inGrid : function(grid) {
		this.grid = grid;
	},
	addViewAction : function(opts) {
		var t = this;
		this.entry = opts.entry;
		
		t.toggle(this.entry);

		if (opts.actions) {
			var acts = {};
			//"click .btn" : ["zoom", ["toggle", ["AssetLine", ""]]]
			$.each(opts.actions, function(key, value) {
				var i = key.indexOf(' ');
				key = key.splice(i+1,0, "[name='"+t.model.get('title')+"'] ");
				for (var l in value){
					var f = value[l];
					if(f.constructor=== Array && f[0]=="toggle")
					{
						t.zoomView = f[1];
						break;
					}
				}
				acts[key] = function() {
					for (var l in value) {//["zoom", ["toggle", ["AssetLine", ""]]
						var f = value[l];
						if (!f)
							continue;
						if (f.constructor === Array) {//["toggle", ["AssetLine", ""]
							
							t[f[0]](f[1]);
						}
						if (f.constructor === String) {// "zoom"
							t[f]();
						};
					}
				}
			})
			t.delegateEvents(acts)
		} ;
	},
	updateView : function(factory, container) {
		var inst = factory();
		var ui = inst.$el.children("[viewid='"+inst.cid+"']");
		if(container.children().is(ui)){
			container.children().not(ui).hide();
			ui.fadeIn();
			return;
		}
		if(ui.length == 0)
			 ui = inst.$el.children();
		container.children().hide();		
		ui.fadeIn();
		container.prepend(ui);
		if(!ui.attr('viewid'))
			ui.attr('viewid', inst.cid);
		inst.setElement(container);
		
		if (inst.update)
			inst.update();
		return inst;
	},
	toggle : function(opts) {
		if (opts[0] && viewFactory[opts[0]]) {			
			this.headView = this.updateView(viewFactory[opts[0]], this.headline);			
		}
		else{
			this.headView = this.updateView(viewFactory.HiddenView, this.headline);
		}
		if (opts[1] && viewFactory[opts[1]]) {
			this.bodyView = this.updateView(viewFactory[opts[1]], this.body);
		}
		else{
			this.bodyView = this.updateView(viewFactory.HiddenView, this.body);
		}

	},
	zoom : function(callback) {
		if (this.grid.activeView == this){
			return;
		}
			
		this.grid.zoom(this.block[0], callback);
		this.grid.activeView = this;
		this.$el.children().attr('zoom', 0);
		this.block.attr('zoom', 1);
		$('div[zoom=0] .panel-title', this.el).animate({
			left : "8px"
		})
		$('div[zoom=0] .panel-tab ul.nav > li', this.el).not(".active").hide();
		$('div[zoom=0] .panel-tab span.triangle', this.el).hide();
		$('div[zoom=0]', this.el).trigger("hide_block");
	},
	restore : function(callback) {
		var t = this;
		this.$el.children().attr('zoom', 0);
		$('div[zoom=0] .panel-title', this.el).animate({
			left : "20px"
		})
		$('div[zoom=0]', this.el).trigger("show_block");	

		$(".panel-tab ul.nav > li.active", this.$el).removeClass('active');
		$('.panel-tab ul.nav > li[entry=1]', this.$el).addClass('active');
		$(".panel-tab > span.triangle", this.$el).animate({'left':'8px'});
				
		this.grid.restore(false, function() {
			t.toggle(t.entry);
			t.grid.activeView = false;

			if(t.model.has('sub'))
				t.model.set({sub:""});
			if (callback)
				callback();
		});

	},
	click : function(evt) {
		var v = evt.data;

		// alert(v.grid.active)
		if (v.grid.active == 0)
			return;
		if ($(v.grid.active).is($(this)))
			return;

		v.grid.activeView.restore();


	}
});
